<template>
  <div class="home-page">
    <!-- 顶部搜索栏 -->
    <!-- <div class="search-section">
      <van-search
        v-model="searchValue"
        placeholder="搜索项目、任务或团队成员"
        @search="onSearch"
        @click="onSearchClick"
      />
    </div> -->

    <!-- 完工扫描按钮 -->
    <div class="scan-section">
      <van-button 
        type="primary" 
        size="large" 
        icon="scan" 
        class="scan-button"
        @click="onScanComplete"
      >
        完工扫描
      </van-button>
    </div>

    <!-- 二维码扫描组件 -->
    <SimpleQRScanner ref="qrScanner" @scan-complete="onScanResult" />

    <!-- 热更新测试组件 -->
    <TestHMR />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showSuccessToast, showFailToast } from 'vant'
import TestHMR from '@/components/TestHMR.vue'
import SimpleQRScanner from '@/components/SimpleQRScanner.vue'

const router = useRouter()

// const searchValue = ref('')

// 二维码扫描器引用
const qrScanner = ref(null)

// 完工扫描功能
const onScanComplete = () => {
  console.log('开始完工扫描...')
  // 启动二维码扫描
  if (qrScanner.value) {
    qrScanner.value.startScan()
  } else {
    showFailToast('扫描器初始化失败')
  }
}

// 处理扫描结果
const onScanResult = (result) => {
  console.log('扫描结果:', result)
  
  // 这里可以根据扫描结果进行业务处理
  // 例如：验证二维码内容、提交数据等
  if (result) {
    showSuccessToast(`扫描成功: ${result}`)
    
    // 可以在这里添加业务逻辑
    // 比如：调用API提交扫描结果
    // submitScanResult(result)
  } else {
    showFailToast('扫描失败')
  }
}


// 搜索功能
// const onSearch = (value) => {
//   console.log('搜索:', value)
//   // 实现搜索逻辑
// }

// const onSearchClick = () => {
//   // 跳转到搜索页面
//   router.push('/search')
// }



onMounted(() => {
  // 页面加载时的初始化逻辑
  console.log('首页加载完成')
  
  // 测试WebSocket连接状态
  console.log('WebSocket连接状态:', navigator.onLine ? '在线' : '离线')
  
  // 显示成功消息
  console.log('项目启动成功！')
})
</script>

<style lang="scss" scoped>
.home-page {
  padding-bottom: var(--spacing-lg);
}

// .search-section {
//   padding: var(--spacing-md);
//   background: var(--background-light);
//   border-bottom: 1px solid var(--border-color);
// }

.scan-section {
  margin: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--background-light);
  border-radius: var(--border-radius-lg);
  text-align: center;
}

.scan-button {
  width: 200px;
  height: 60px;
  font-size: 18px;
  font-weight: bold;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


// 平板适配
@media screen and (min-width: 768px) {
  .home-page {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .scan-section {
    padding: var(--spacing-xl);
  }
  
  .scan-button {
    width: 300px;
    height: 80px;
    font-size: 20px;
  }
  
}
</style>
